<template>
  <div>
    <el-form ref="form" :model="data" label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="进货日期">
            {{ data.purchasetime }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="供应商名称">
            {{ data.scunitname }}
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-row> -->
      <!-- <el-col :span="12">
            <el-form-item label="快检记录">
                {{data.purchasetime}}
            </el-form-item>
          </el-col>
           <el-col :span="12">
            <el-form-item label="合格证明文件">
                  {{data.scunitname}}
            </el-form-item>
          </el-col>
        </el-row>

             <el-row>
          <el-col :span="12">
            <el-form-item label="采购凭证">
                {{data.purchasetime}}
            </el-form-item>
          </el-col>
        </el-row> -->
    </el-form>

    <el-table :data="data.list" border style="width: 100%">
      <el-table-column
        prop="salessubitemname"
        label="品种名称"
      ></el-table-column>
      <el-table-column label="数量">
        <template slot-scope="scope">
          {{ scope.row.purchaseweight + scope.row.company }}
        </template>
      </el-table-column>
      <!-- <el-table-column prop="scunitname" label="产地/生产厂商">
          <template slot-scope="scope">
            <div>{{ scope.row.manufacturerStr || "--" }}</div>
          </template>
        </el-table-column> -->
      <el-table-column  label="核磅验收照片" v-if="show">
        <template slot-scope="scope">
          <!-- <div>{{ scope.row.manufacturerStr || "--" }}</div> -->
         <div>
          <el-image
           v-for="(item,index) in scope.row.imgList.filter(x=>x.category=='NSPG')"
            style="width:50px; height:50px"
            :src="item.fileaddress"
            :preview-src-list="scope.row.imgList.filter(x=>x.category=='NSPG').map(x=>x.fileaddress)"
            :key="index"
          >
          </el-image>
          <div v-if="scope.row.imgList.filter(x=>x.category=='NSPG').length==0">无</div>
          </div>
        </template>
      </el-table-column>


         <el-table-column  label="合格证明文件" width="180">
        <template slot-scope="scope">
          <!-- <div>{{ scope.row.manufacturerStr || "--" }}</div> -->
         <div v-if="scope.row.imgList.filter(x=>x.category=='Voucher').length">
          <el-image
          @click="
          ()=>{
            if(item.fileaddress.match(/[^\.]\w*$/)[0] == 'pdf'){
              $downloadFiles(item.fileaddress)
            }
           
          }
          
          "
           v-for="item,index in scope.row.imgList.filter(x=>x.category=='Voucher')"
            style="width:50px; height:50px;margin-right:10px;cursor: pointer;"
           :src="item.fileaddress&&item.fileaddress.match(/[^\.]\w*$/)[0] == 'pdf'?'https://spaq.suzhou.gov.cn/image/ssa_Desktop/ssa_20230217pdf.png':item.fileaddress"
          :preview-src-list="item.fileaddress&&item.fileaddress.match(/[^\.]\w*$/)[0] == 'pdf'?[]:[item.fileaddress]"
          :key="index"
          >
          </el-image>
            <!-- <div v-if="scope.row.imgList.filter(x=>x.category=='Voucher').length==0">无</div> -->
          </div>
          <div v-else-if="scope.row.quickInspectionResults==1&&scope.row.imgList.filter(x=>x.category=='Voucher').length==0">
             --
          </div>
          <div v-else style="color:#808080">
             无
          </div>
        </template>
      </el-table-column>


  <el-table-column label="快检结果">
        <template slot-scope="scope">
              <div v-if="scope.row.quickInspectionResults==0&&scope.row.imgList.filter(x=>x.category=='Voucher').length" >--</div>
              <div v-else-if="scope.row.quickInspectionResults==1&&scope.row.imgList.filter(x=>x.category=='Voucher').length==0"  class="green">阴性</div>
              <div v-else-if="scope.row.quickInspectionResults==0&&scope.row.imgList.filter(x=>x.category=='Voucher').length==0" style="color:#808080">无</div>
              <div v-else-if="scope.row.quickInspectionResults==1&&scope.row.imgList.filter(x=>x.category=='Voucher').length"  class="green">阴性</div>

        </template>
      </el-table-column>



      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button size="mini" @click="viewInspect(scope.row)"
            >查看溯源</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <rz-height></rz-height>
    <el-tabs v-model="activeName">
      <el-tab-pane label="快检记录" name="1">
        <!-- <van-tab title="快检记录">
                  <view class="list">
                    <view class="item_wapper"
                      wx:for="{{list}}" wx:key="id" data-item="{{item}}" bind:tap="onView">
                        <view class="item">
                  <cu-list label="检测日期:" type="2" >
                    <view slot="left">
                    {{item.quickCheckDateStr}}
                    </view>
                   <view slot="right" class="time">
                    <view class="label ">检测结果:</view>
                    <view class="width red" wx:if="{{item.quickCheckResult=='+'}}">
                    疑似阳性
                    </view>
                       <view class="width green" wx:else>
                        阴性
                      </view>
                    </view> 
                  </cu-list>
                  <cu-list label="检测品种:" type="4"  label_right="检测项目:" content="{{item.salesSubitemName}}"
                  label_content="{{item.quickCheckSubitemName}}"></cu-list>
                  <cu-list label="快检单位:" >
                   {{item.quickCheckUnitName}}
                  </cu-list>
                  </view>
                  </view> -->

        <el-table :data="list" border style="width: 100%">
          <el-table-column
            prop="quickCheckDate"
            label="检测日期"
            width="180"
          ></el-table-column>
          <el-table-column label="检测结果"       width="120">
            <template slot-scope="scope">
              <div>
                <div class="red" v-if="scope.row.quickCheckResult == '+'">
                  疑似阳性
                </div>
                <div class="green" v-else>阴性</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="salesSubitemName"
            label="检测品种"
             width="160"
          ></el-table-column>
          <el-table-column
            prop="quickCheckSubitemName"
            label="检测项目"
          ></el-table-column>
          <el-table-column
            prop="quickCheckUnitName"
            label="快检单位"
          ></el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="合格证明文件" name="2">
        <div class="right">
          <a href="javascript:;" @click="dialogVisible = true"
            >食品证明文件说明</a
          >
          <span
            class="iconfont icon-wenhao"
            @click="dialogVisible = true"
          ></span>
        </div>
            <rz-height/>
        <!-- <upload v-model="imageList" :disabled="true" v-if="activeName == 2" /> -->

        <div class="item">
          <div
            class="item_icon"
            v-for="(items, index) in fileList"
            :key="index"
             @click="$downloadFiles(items.url)"
          >
            <!-- <span
              class="el-icon-document-add"
             
            >
            </span> -->
              <el-image
            style="width:50px; height:50px;margin-right:10px;cursor: pointer;"
           src="https://spaq.suzhou.gov.cn/image/ssa_Desktop/ssa_20230217pdf.png"
          >
          </el-image>
          <rz-height/>
          <div style="text-align:center">{{items.name}}的合格证明文件</div>
          </div>
        </div>
                 <rz-height/>
          <div class="item">
          <div
            class="item_icon"
            v-for="(items, index) in imageList"
            :key="index"
          >
            <!-- <span
              class="el-icon-document-add"
             
            >
            </span> -->
              <el-image
            style="width:50px; height:50px;margin-right:10px;cursor: pointer;"
           :src="items.url"
           :preview-src-list="[items.url]"
          >
          </el-image>
          <rz-height/>
          <div style="text-align:center">{{items.name}}的合格证明文件</div>
          </div>
        </div>
        <el-empty
          description="暂无数据"
          v-if="imageList.length == 0 && fileList.length == 0"
        ></el-empty>
      </el-tab-pane>
      <el-tab-pane label="采购凭证" name="3">
        <upload v-model="purchase" :disabled="true" v-if="activeName == 3" />
        <el-empty description="暂无数据" v-if="purchase.length == 0"></el-empty>
      </el-tab-pane>
    </el-tabs>
    <rz-dialog
      :dialogVisible.sync="dialogVisible"
      title="食品合格证明文件说明"
      width="50%"
      :isShowConfirm="false"
      appendToBody
    >
      <div class="center title">食品合格证明文件说明</div>
      <rz-height height="20"></rz-height>
      <div>
        根据2018版《餐饮服务食品安全操作规范》要求，对食品合格证明文件要求说明如下：
      </div>
      <rz-height height="20"></rz-height>

      <el-table :data="listData" border style="width: 100%">
        <el-table-column prop="label" label="食品类别"></el-table-column>
        <el-table-column prop="text" label="食品合格证明文件"></el-table-column>
      </el-table>
    </rz-dialog>
    <rz-dialog
      :dialogVisible.sync="viewVisible"
      title="查看索证索票"
      width="50%"
      :isShowConfirm="false"
      appendToBody
    >
      <purchase :data="dataList" v-if="viewVisible"></purchase>
    </rz-dialog>
  </div>
</template>
<script>
import {
  findTestReportAndPurchasingDocuments,
  jcFindListByCondition,
  CompanyMainPageInfo
} from "@/api/modules/enterprise";
// import { mapGetters } from "vuex";
export default {
  // props:[],
  // 页面加载
  props: {
    data: {
      type: Object,
    },
  },
  created() {
    // if (this.$route.query.data) {
    //   let data = JSON.parse(this.$route.query.data);
    // this.data = this.data;
    this.findTestReportAndPurchasingDocuments(this.data.purchasecode);
    this.jcFindListByCondition();
       CompanyMainPageInfo({
        params: {
          id: sessionStorage.getItem("interpretation"),
        },
      }).then((res) => {
      if (
                res.data.bodyindustryremarks1 == "幼托机构食堂" ||
                res.data.bodyindustryremarks1 == "学校食堂"
              ) {
          this.show=true
        }
      });
    // }
  },
  // 页面加载完成
  mounted() {
    // console.log(this.roles);
  },
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      show:false,
      viewVisible: false,
      // data: {},
      dataList: {},
      activeName: "1",
      imageList: [],
      fileList: [],
      purchase: [],
      list: [],
      dialogVisible: false,
      listData: [
        {
          label: "猪肉类",
          text: "每批次提供“动物产品检疫合格证明”、“肉品品质检验合格证明”、“非洲猪瘟检测报告”",
        },
        {
          label: "其它畜禽肉",
          text: "每批次提供“动物产品检疫合格证明”",
        },
        {
          label: "蔬菜、水果、水产",
          text: "每批次提供快检报告",
        },
        {
          label: "预包装食品、豆制品、食品添加剂",
          text: "每批提供“检验合格证”或“出厂检验报告”、“第三方检测报告”",
        },
      ],
    };
  },
  // 方法
  methods: {
    async findTestReportAndPurchasingDocuments(purchasecode) {
      let { data } = await findTestReportAndPurchasingDocuments({
        purchasecode,
      });
      data.testReportResponseList.forEach((item) => {

           item.fileaddress= item.fileaddress.replace("PDF","pdf")



        if (item.fileaddress.match(/[^\.]\w*$/)[0] == "pdf") {
          this.fileList.push({ url: item.fileaddress,name:item.salessubitemname });
        } else {
          this.imageList.push({ url: item.fileaddress,name:item.salessubitemname  });
        }
      });
      data.purchasingDocumentsResponseList.forEach((x) => {
        x.url = x.fileaddress;
      });
      this.purchase = data.purchasingDocumentsResponseList;
    },
    viewInspect(e) {
      e.purchasetime = this.data.purchasetime;
      e.scunitname = this.data.scunitname;
      e.unitId = this.data.unitId;
      e.sclicenseno = this.data.sclicenseno;
      // this.$router.push(`/implement/purchase?data=${JSON.stringify(e)}`);
      this.dataList = e;
      this.viewVisible = true;
    },
    async jcFindListByCondition() {
      let { data } = await jcFindListByCondition({
        pageIndex: 0,
        pageSize: 0,
        purchasecode: this.data.purchasecode,
        purchasetime: this.data.purchasetime,
        sclicenseno: this.data.sclicenseno,
        unitId: this.data.unitId,
      });
      this.list = data.list;
    },
  },
  // 监听属性
  watch: {},
  // 组件
  components: {
    upload: () => import("@/views/enterprise/components/upload"),
    purchase: () => import("@/views/enterprise/components/purchase"),
  },
  // 计算属性
  computed: {
    // ...mapGetters(["roles"]),
  },
};
</script>

<style lang="scss" scoped>
.right {
  color: orange;
}

.item {
  display: flex;
  .item_icon {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 150px;
    height: 150px;
    border: 1px solid #c0ccda;
    border-radius: 6px;
    margin-right: 10px;
    cursor: pointer;
    .el-icon-document-add {
      font-size: 50px;
    }
  }
}
.title {
  font-size: $defaultSize;
}
</style>